@use "ag";

@mixin output {
    // /**
    //  ****************************
    //  * Generic Styles
    //  ****************************
    // */
    // if we don't do this, then the width and height of the grid would be ignored,
    // as there is no default display for the element ag-grid-a2 (as it's not a natural dom element)
    ag-grid, ag-grid-angular, ag-grid-ng2, ag-grid-polymer, ag-grid-aurelia  {
        display: block;
    }

    // ARIA
    .ag-aria-description-container {
        z-index: 9999;
        border: 0px;
        clip: rect(1px, 1px, 1px, 1px);
        height: 1px;
        width: 1px;
        position: absolute;
        overflow: hidden;
        padding: 0px;
        white-space: nowrap;
    }

    .ag-hidden {
        display: none !important;
    }

    .ag-invisible {
        visibility: hidden !important;
    }

    .ag-no-transition {
        transition: none !important;
    }

    .ag-drag-handle {
        cursor: grab;
    }

    .ag-column-drop-wrapper {
        display: flex;
    }

    .ag-column-drop-horizontal-half-width {
        display: inline-block;
        width: 50% !important;
    }

    .ag-unselectable {
        @include ag.selectable(none);
    }

    .ag-selectable {
        @include ag.selectable(text);
    }

    .ag-tab {
        position: relative;
    }

    .ag-tab-guard {
        position: absolute;
        width: 0;
        height: 0;
        display: block;
    }

    .ag-select-agg-func-popup {
        position: absolute;
    }

    .ag-input-wrapper, .ag-picker-field-wrapper {
        display: flex;
        flex: 1 1 auto;
        align-items: center;
        line-height: normal;
        position: relative;
    }

    // setting shake class to an item will give it a left ot right animation
    // used for the 'left' and 'right' arrows when dragging columns and scrolling
    .ag-shake-left-to-right {
        animation-direction: alternate;
        animation-duration: 0.2s;
        animation-iteration-count: infinite;
        animation-name: ag-shake-left-to-right;
    }

    @keyframes ag-shake-left-to-right {
        from {
            padding-left: 6px;
            padding-right: 2px;
        }

        to {
            padding-left: 2px;
            padding-right: 6px;
        }
    }

    .ag-root-wrapper {
        cursor: default;
        position: relative; // set to relative, so absolute popups appear relative to this
        display: flex;
        flex-direction: column;
        overflow: hidden;
        white-space: normal;

        &.ag-layout-normal {
            height: 100%;
        }
    }

    .ag-watermark {
        position: absolute;
        bottom: 20px;
        right: 25px;
        opacity: 0.7;
        transition: opacity 1s ease-out 3s;
        color: #9B9B9B;
        &::before {
            content: '';
            background-image: url();
            background-repeat: no-repeat;
            background-size: 170px 40px;
            display: block;
            height: 40px;
            width: 170px;
        }
    }

    .ag-watermark-text {
        opacity: 0.5;
        font-weight: bold;
        font-family: Impact, sans-serif;
        font-size: 19px;
        padding-left: 0.7rem;
    }

    .ag-root-wrapper-body {
        display: flex;
        flex-direction: row;

        &.ag-layout-normal {
            flex: 1 1 auto;
            height: 0;
            min-height: 0;
        }
    }

    .ag-root {
        position: relative; // set to relative, so absolute popups appear relative to this
        display: flex;
        flex-direction: column;

        &.ag-layout-normal,
        &.ag-layout-auto-height {
            overflow: hidden; // was getting some 'shouldn't be there' scrolls, this sorts it out
            flex: 1 1 auto;
            width: 0;
        }

        &.ag-layout-normal {
            height: 100%;
        }
    }

    // /**
    //  ****************************
    //  * Viewports
    //  ****************************
    // */
    .ag-header-viewport,
    .ag-floating-top-viewport,
    .ag-body-viewport,
    .ag-center-cols-viewport,
    .ag-floating-bottom-viewport,
    .ag-body-horizontal-scroll-viewport,
    .ag-body-vertical-scroll-viewport,
    .ag-virtual-list-viewport,
    .ag-sticky-top-viewport {
        position: relative;
        height: 100%;
        min-width: 0px;
        overflow: hidden;
        flex: 1 1 auto;
    }

    .ag-body-viewport, .ag-center-cols-viewport {
        &::-webkit-scrollbar {
            display: none !important;
        }
        -ms-overflow-style: none !important;
        scrollbar-width: none !important;
    }

    .ag-body-viewport {
        display: flex;

        &.ag-layout-normal {
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
        }
    }

    .ag-center-cols-viewport {
        min-height: 100%;
        width: 100%;
        overflow-x: auto;
    }

    .ag-body-horizontal-scroll-viewport {
        overflow-x: scroll;
    }

    .ag-body-vertical-scroll-viewport {
        overflow-y: scroll;
    }

    .ag-virtual-list-viewport {
        overflow: auto;
        width: 100%;
    }

    // /**
    //  ****************************
    //  * Containers
    //  ****************************
    // */
    .ag-header-container,
    .ag-floating-top-container,
    .ag-body-container,
    .ag-pinned-right-cols-container,
    .ag-center-cols-container,
    .ag-pinned-left-cols-container,
    .ag-floating-bottom-container,
    .ag-body-horizontal-scroll-container,
    .ag-body-vertical-scroll-container,
    .ag-full-width-container,
    .ag-floating-bottom-full-width-container,
    .ag-virtual-list-container,
    .ag-sticky-top-container {
        position: relative;
    }

    // for when auto height is used but there is no row data
    .ag-header-container,
    .ag-floating-top-container,
    .ag-floating-bottom-container,
    .ag-sticky-top-container {
        height: 100%;
        white-space: nowrap;
    }

    .ag-center-cols-container {
        display: block;
    }

    .ag-pinned-right-cols-container {
        display: block;
    }

    .ag-body-horizontal-scroll-container {
        height: 100%;
    }

    .ag-body-vertical-scroll-container {
        width: 100%;
    }

    .ag-full-width-container,
    .ag-floating-top-full-width-container,
    .ag-floating-bottom-full-width-container,
    .ag-sticky-top-full-width-container {
        position: absolute;
        top: 0px;
        @include ag.unthemed-rtl(( left: 0 ));
        // turn off pointer events, because this container overlays the main row containers.
        // so when user clicks on space between full width rows, we want the mouse clicks to
        // pass onto the underlying container where the real rows are. eg if using full width
        // for row grouping, the groups will be in the full width container, but when user
        // opens a group the children are shown in the other containers - we want to make sure we
        // don't block mouse clicks to those other containers with the children.
        pointer-events: none;
    }

    .ag-full-width-container {
        width: 100%;
    }

    .ag-floating-bottom-full-width-container, .ag-floating-top-full-width-container {
        display: inline-block;
        overflow: hidden;
        height: 100%;
        width: 100%;
    }

    .ag-virtual-list-container {
        overflow: hidden;
    }

    // /**
    //  ****************************
    //  * Scrollers
    //  ****************************
    // */
    .ag-body {
        position: relative;
        display: flex;
        flex: 1 1 auto;
        flex-direction: row !important; // we have to state this for rtl, otherwise row-reverse is inherited
        min-height: 0;
    }

    .ag-body-horizontal-scroll,
    .ag-body-vertical-scroll {
        min-height: 0;
        min-width: 0;
        display: flex;
        position: relative;
        &.ag-scrollbar-invisible {
            position: absolute;
            bottom: 0;
            &.ag-apple-scrollbar {
                opacity: 0;
                transition: opacity 400ms;
                visibility: hidden;
                &.ag-scrollbar-scrolling, &.ag-scrollbar-active {
                    visibility: visible;
                    opacity: 1;
                }
            }
        }
    }

    .ag-body-horizontal-scroll {
        width: 100%;
        &.ag-scrollbar-invisible {
            left: 0;
            right: 0;
        }
    }

    .ag-body-vertical-scroll {
        height: 100%;
        &.ag-scrollbar-invisible {
            top: 0;
            z-index: 10;
            @include ag.unthemed-rtl(( right: 0 ));
        }
    }

    .ag-force-vertical-scroll {
        overflow-y: scroll !important;
    }

    .ag-horizontal-left-spacer, .ag-horizontal-right-spacer {
        height: 100%;
        min-width: 0;
        overflow-x: scroll;
        &.ag-scroller-corner {
            overflow-x: hidden;
        }
    }

    // /**
    //  ****************************
    //  * Headers
    //  ****************************
    // */
    .ag-header, .ag-pinned-left-header, .ag-pinned-right-header {
        display: inline-block;
        overflow: hidden;
        position: relative;
    }

    .ag-header-cell-sortable .ag-header-cell-label {
        cursor: pointer;
    }

    .ag-header {
        display: flex;
        width: 100%;
        white-space: nowrap;
    }

    .ag-pinned-left-header {
        height: 100%;
    }

    .ag-pinned-right-header {
        height: 100%;
    }

    .ag-header-row {
        position: absolute;
    }

    .ag-header-row:not(.ag-header-row-column-group) {
        // so when floating filters are height 0px, the contents don't spill out
        overflow: hidden;
    }

    .ag-header.ag-header-allow-overflow .ag-header-row {
        overflow: visible;
    }

    .ag-header-cell {
        display: inline-flex;
        align-items: center;
        position: absolute;
        height: 100%;
    }

    .ag-header-cell.ag-header-active .ag-header-cell-menu-button, .ag-header-cell-filter-button {
        opacity: 1;
    }

    .ag-header-cell-menu-button:not(.ag-header-menu-always-show) {
        transition: opacity 0.2s;
        opacity: 0;
    }

    .ag-header-group-cell-label, .ag-header-cell-label {
        display: flex;
        flex: 1 1 auto;
        align-self: stretch;
        align-items: center;
    }
    
    .ag-header-cell-label {
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .ag-header-group-cell-label.ag-sticky-label {
        position: sticky;
        flex: none;
        max-width: 100%;
    }

    .ag-header-group-text {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .ag-header-cell-text {
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .ag-header-cell:not(.ag-header-cell-auto-height) .ag-header-cell-comp-wrapper {
        height: 100%;
        display: flex;
        align-items: center;
    }

    .ag-header-cell-comp-wrapper {
        width: 100%;
    }
    
    .ag-header-cell-wrap-text .ag-header-cell-comp-wrapper {
        white-space: normal;
    }

    .ag-right-aligned-header .ag-header-cell-label {
        flex-direction: row-reverse;
    }

    .ag-header-cell-resize {
        position: absolute;
        z-index: 2;
        height: 100%;
        width: 8px;
        top: 0;

        cursor: ew-resize;

        // unpinned headers get their rezise handle on the right in normal mode and left in RTL mode
        @include ag.unthemed-rtl((
            right: -4px
        ));
    }

    .ag-pinned-left-header .ag-header-cell-resize {
        right: -4px; // pinned left headers always have their resize on the right, even in RTL mode
    }

    .ag-pinned-right-header .ag-header-cell-resize {
        left: -4px; // pinned right headers always have their resize on the left, even in RTL mode
    }

    .ag-header-select-all {
        display: flex;
    }

    .ag-header-cell-menu-button,
    .ag-header-cell-filter-button,
    .ag-side-button-button,
    .ag-panel-title-bar-button,
    .ag-floating-filter-button-button {
        cursor: pointer;
    }

    // /**
    //  ****************************
    //  * Columns
    //  ****************************
    // */
    .ag-column-moving {
        .ag-cell {
            transition: left 0.2s;
        }

        .ag-header-cell {
            transition: left 0.2s;
        }

        .ag-header-group-cell {
            transition: left 0.2s, width 0.2s;
        }
    }

    // /**
    //  ****************************
    //  * Column Panel
    //  ****************************
    // */

    .ag-column-panel {
        display: flex;
        flex-direction: column;
        overflow: hidden;
        flex: 1 1 auto;
    }

    .ag-column-select {
        position: relative;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        flex: 3 1 0px;
    }

    .ag-column-select-header {
        position: relative;
        display: flex;
        flex: none;
    }

    .ag-column-select-header-icon {
        position: relative;
    }

    .ag-column-select-header-filter-wrapper {
        flex: 1 1 auto;
    }

    .ag-column-select-header-filter {
        width: 100%;
    }

    .ag-column-select-list {
        flex: 1 1 0px;
        overflow: hidden;
    }

    .ag-column-drop {
        position: relative;
        display: inline-flex;
        align-items: center;
        overflow: auto;
        width: 100%;
    }

    .ag-column-drop-list {
        display: flex;
        align-items: center;
    }

    .ag-column-drop-cell {
        position: relative;
        display: flex;
        align-items: center;
    }

    .ag-column-drop-cell-text {
        overflow: hidden;
        flex: 1 1 auto;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .ag-column-drop-vertical {
        display: flex;
        flex-direction: column;
        overflow: hidden;
        align-items: stretch;
        flex: 1 1 0px;
    }

    .ag-column-drop-vertical-title-bar {
        display: flex;
        align-items: center;
        flex: none;
    }

    .ag-column-drop-vertical-list {
        position: relative;
        align-items: stretch;
        flex-grow: 1;
        flex-direction: column;
        overflow-x: auto;

        > * {
            flex: none;
        }
    }

    .ag-column-drop-empty .ag-column-drop-vertical-list {
        overflow: hidden;
    }

    .ag-column-drop-vertical-empty-message {
        display: block;
    }

    .ag-column-drop.ag-column-drop-horizontal {
        white-space: nowrap;
        overflow: hidden;
    }

    .ag-column-drop-cell-button {
        cursor: pointer;
    }

    .ag-filter-toolpanel {
        flex: 1 1 0px;
        min-width: 0;
    }

    .ag-filter-toolpanel-header {
        position: relative;
    }

    .ag-filter-toolpanel-header, .ag-filter-toolpanel-search {
        display: flex;
        align-items: center;

        > * {
            display: flex;
            align-items: center;
        }
    }

    .ag-filter-apply-panel {
        display: flex;
        justify-content: flex-end;
        overflow: hidden;
    }

    // /**
    //  ****************************
    //  * Rows
    //  ****************************
    // */
    // for row animations. 
    .ag-row-animation .ag-row {
        transition: transform 0.4s, top 0.4s;
    }
    // for rows older than one second, we also animate the height. we don't include the height
    // initially so we are not animating auto-height rows on initial render.
    .ag-row-animation .ag-row.ag-after-created {
        transition: transform 0.4s, top 0.4s, height 0.4s;
    }

    .ag-row-no-animation .ag-row {
        transition: none;
    }

    .ag-row {
        white-space: nowrap;
        width: 100%;
    }

    .ag-row-loading {
        display: flex;
        align-items: center;
    }

    .ag-row-position-absolute {
        position: absolute;
    }

    .ag-row-position-relative {
        position: relative;
    }

    .ag-full-width-row {
        overflow: hidden;
        // turn events back on, as we removed them in the parent
        pointer-events: all;
    }

    .ag-row-inline-editing {
        z-index: 1;
    }

    .ag-row-dragging {
        z-index: 2;
    }

    .ag-stub-cell {
        display: flex;
        align-items: center;
    }

    // /**
    //  ****************************
    //  * Cells
    //  ****************************
    // */
    .ag-cell {
        display: inline-block;
        position: absolute;
        white-space: nowrap;
        height: 100%;
    }

    // This is used when using a Cell Wrapper (eg row drag, selection, or auto-height).
    // If not using wrapper, ag-cell-value is on a div, which is 100% width. However when
    // in a wrapper, it's a span (not a div), so we need 100% width to provide consistent
    // behaviour regardless of wrapper used or not. If we did not do this, Cell Renderer's
    // with 100% width wouldn't get the full width when using a wrapper.
    // Instead of just 100% width we use flex, as it's not the only item on the line, so it
    // fills the remaining space.
    .ag-cell-value {
        flex: 1 1 auto;
    }

    .ag-cell-value, .ag-group-value {
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .ag-cell-wrap-text {
        white-space: normal;
        word-break: break-all;
    }

    .ag-cell-wrapper {
        display: flex;
        align-items: center;
        // adding overflow: hidden breaks the checkbox focus outline
        // overflow: hidden;
        // adding width: 100% here breaks text-overflow: ellipsis
        // width: 100%;
        &.ag-row-group {
            align-items: flex-start;
        }
    }

    .ag-sparkline-wrapper {
        position: absolute;
        height: 100%;
        width: 100%;
        left: 0;
        top: 0;
    }

    .ag-full-width-row .ag-cell-wrapper.ag-row-group {
        height: 100%;
        align-items: center;
    }

    .ag-cell-inline-editing {
        z-index: 1;

        .ag-cell-wrapper,
        .ag-cell-edit-wrapper,
        .ag-cell-editor,
        .ag-cell-editor .ag-wrapper,
        .ag-cell-editor input {
            height: 100%;
            width: 100%;
            line-height: normal;
        }
    }

    .ag-cell .ag-icon {
        display: inline-block;
        vertical-align: middle;
    }

    // /**
    //  ****************************
    //  * Filters
    //  ****************************
    // */
    .ag-set-filter-item {
        display: flex;
        align-items: center;
        height: 100%;
    }

    .ag-set-filter-item-checkbox {
        display: flex;
        overflow: hidden;
        height: 100%;
    }

    .ag-set-filter-group-icons {
        display: block;
        > * {
            cursor: pointer;
        }
    }

    .ag-filter-body-wrapper {
        display: flex;
        flex-direction: column;
    }

    .ag-filter-filter {
        flex: 1 1 0px;
    }

    .ag-filter-condition {
        display: flex;
        justify-content: center;
    }

    // /**
    //  ****************************
    //  * Floating Filter
    //  ****************************
    // */

    .ag-floating-filter-body {
        position: relative;
        display: flex;
        flex: 1 1 auto;
        height: 100%;
    }

    .ag-floating-filter-full-body {
        display: flex;
        flex: 1 1 auto;
        height: 100%;
        width: 100%;
        align-items: center;
        overflow: hidden;
    }

    .ag-floating-filter-full-body > div {
        flex: 1 1 auto;
    }

    .ag-floating-filter-input {
        align-items: center;
        display: flex;
        width: 100%;

        > * {
            flex: 1 1 auto;
        }
    }

    .ag-floating-filter-button {
        display: flex;
        flex: none;
    }

    .ag-set-floating-filter-input input[disabled] {
        pointer-events: none;
    }

    // /**
    //  ****************************
    //  * Drag & Drop
    //  ****************************
    // */

    .ag-dnd-ghost {
        position: absolute;
        display: inline-flex;
        align-items: center;
        cursor: move;
        white-space: nowrap;
        z-index: 9999;
    }

    // /**
    //  ****************************
    //  * Overlay
    //  ****************************
    // */
    .ag-overlay {
        height: 100%;
        left: 0;
        pointer-events: none;
        position: absolute;
        top: 0;
        width: 100%;
        z-index: 2;
    }

    .ag-overlay-panel {
        display: flex;
        height: 100%;
        width: 100%;
    }

    .ag-overlay-wrapper {
        display: flex;
        flex: none;
        width: 100%;
        height: 100%;
        align-items: center;
        justify-content: center;
        text-align: center;
    }

    .ag-overlay-loading-wrapper {
        // prevent interaction with grid while it's loading
        pointer-events: all;
    }

    // /**
    //  ****************************
    //  * Popup
    //  ****************************
    // */

    .ag-popup-child {
        z-index: 5;
        top: 0;
    }

    .ag-popup-editor {
        position: absolute;
        @include ag.selectable(none);
    }

    .ag-large-text-input {
        display: block;
    }

    // /**
    //  ****************************
    //  * Virtual Lists
    //  ****************************
    // */
    .ag-virtual-list-item {
        position: absolute;
        width: 100%;
    }

    // /**
    //  ****************************
    //  * Floating Top and Bottom
    //  ****************************
    // */
    .ag-floating-top {
        overflow: hidden;
        white-space: nowrap;
        width: 100%;
        position: relative;
        display: flex;
    }

    .ag-pinned-left-floating-top {
        display: inline-block;
        overflow: hidden;
        position: relative;
        min-width: 0px;
    }

    .ag-pinned-right-floating-top {
        display: inline-block;
        overflow: hidden;
        position: relative;
        min-width: 0px;
    }

    .ag-floating-bottom {
        overflow: hidden;
        white-space: nowrap;
        width: 100%;
        position: relative;
        display: flex;
    }

    .ag-pinned-left-floating-bottom {
        display: inline-block;
        overflow: hidden;
        position: relative;
        min-width: 0px;
    }

    .ag-pinned-right-floating-bottom {
        display: inline-block;
        overflow: hidden;
        position: relative;
        min-width: 0px;
    }

    // /**
    //  ****************************
    //  * Sticky Top
    //  ****************************
    // */
    .ag-sticky-top {
        position: absolute;
        display: flex;
        width: 100%;
    }

    .ag-pinned-left-sticky-top,
    .ag-pinned-right-sticky-top {
        position: relative;
        height: 100%;
        overflow: hidden;
    }

    .ag-sticky-top-full-width-container {
        overflow: hidden;
        width: 100%;
        height: 100%;
    }

    // /**
    //  ****************************
    //  * Dialog
    //  ****************************
    // */
    .ag-dialog, .ag-panel {
        display: flex;
        flex-direction: column;
        position: relative;
        overflow: hidden;
    }

    .ag-panel-title-bar {
        display: flex;
        flex: none;
        align-items: center;
        cursor: default;
    }

    .ag-panel-title-bar-title {
        flex: 1 1 auto;
    }

    .ag-panel-title-bar-buttons {
        display: flex;
    }

    .ag-panel-title-bar-button {
        cursor: pointer;
    }

    .ag-panel-content-wrapper {
        display: flex;
        flex: 1 1 auto;
        position: relative;
        overflow: hidden;
    }

    .ag-dialog {
        position: absolute;
    }

    .ag-resizer {
        position: absolute;
        pointer-events: none;
        z-index: 1;
        @include ag.selectable(none);
        &.ag-resizer-topLeft {
            top: 0;
            left: 0;
            height: 5px;
            width: 5px;
            cursor: nwse-resize;
        }
        &.ag-resizer-top {
            top: 0;
            left: 5px;
            right: 5px;
            height: 5px;
            cursor: ns-resize;
        }
        &.ag-resizer-topRight {
            top: 0;
            right: 0;
            height: 5px;
            width: 5px;
            cursor: nesw-resize;
        }
        &.ag-resizer-right {
            top: 5px;
            right: 0;
            bottom: 5px;
            width: 5px;
            cursor: ew-resize;
        }
        &.ag-resizer-bottomRight {
            bottom: 0;
            right: 0;
            height: 5px;
            width: 5px;
            cursor: nwse-resize;
        }
        &.ag-resizer-bottom {
            bottom: 0;
            left: 5px;
            right: 5px;
            height: 5px;
            cursor: ns-resize;
        }
        &.ag-resizer-bottomLeft {
            bottom: 0;
            left: 0;
            height: 5px;
            width: 5px;
            cursor: nesw-resize;
        }
        &.ag-resizer-left {
            left: 0;
            top: 5px;
            bottom: 5px;
            width: 5px;
            cursor: ew-resize;
        }
    }

    // /**
    //  ****************************
    //  * Tooltip
    //  ****************************
    // */

    .ag-tooltip {
        position: absolute;
        z-index: 99999;
    }

    .ag-tooltip-custom {
        position: absolute;
        z-index: 99999;
    }

    .ag-tooltip:not(.ag-tooltip-interactive),
    .ag-tooltip-custom:not(.ag-tooltip-interactive) {
        pointer-events: none;
    }

    // /**
    //  ****************************
    //  * Animations
    //  ****************************
    // */

    // this is used by the animateShowChangeCellRenderer. it is arguable that this belongs in the themes,
    // however it is not tied to color, only placement and visiblity, which is behaviour and not style,
    // thus belongs here, besides it doesn't change wih the themes
    .ag-value-slide-out {
        margin-right: 5px;
        opacity: 1;
        transition: opacity 3s, margin-right 3s; // as value fades, it also moves to the left via the margin setting
        transition-timing-function: linear;
    }

    .ag-value-slide-out-end {
        margin-right: 10px;
        opacity: 0;
    }

    .ag-opacity-zero {
        opacity: 0 !important;
    }

    // /**
    //  ****************************
    //  * Menu
    //  ****************************
    // */
    .ag-menu {
        max-height: 100%;
        overflow-y: auto;
        position: absolute;
        @include ag.selectable(none);
    }

    .ag-menu-column-select-wrapper {
        height: 265px;
        overflow: auto;

        .ag-column-select {
            height: 100%;
        }
    }

    .ag-dialog .ag-panel-content-wrapper .ag-column-select {
        user-select: none;
    }

    .ag-menu-list {
        display: table;
        width: 100%;
    }

    .ag-menu-option, .ag-menu-separator {
        display: table-row;
    }

    .ag-menu-option-part, .ag-menu-separator-part {
        display: table-cell;
        vertical-align: middle;
    }

    .ag-menu-option-text {
        white-space: nowrap;
    }

    .ag-menu-option-custom {
        display: contents;
    }

    .ag-compact-menu-option {
        width: 100%;
        display: flex;
        flex-wrap: nowrap;
    }

    .ag-compact-menu-option-text {
        white-space: nowrap;
        flex: 1 1 auto;
    }

    // /**
    //  ****************************
    //  * Rich Select
    //  ****************************
    // */
    .ag-rich-select {
        cursor: default;
        outline: none;
        height: 100%;
    }

    .ag-rich-select-value {
        display: flex;
        align-items: center;
        height: 100%;
        .ag-picker-field-display {
            overflow: hidden;
            text-overflow: ellipsis;
            &.ag-display-as-placeholder {
                opacity: 0.5;
            }
        }
    }

    .ag-rich-select-list {
        position: relative;
        .ag-loading-text {
            min-height: 2rem;
        }
    }

    .ag-rich-select-row {
        display: flex;
        flex: 1 1 auto;
        align-items: center;
        white-space: nowrap;
        overflow: hidden;
        height: 100%;
    }

    .ag-rich-select-field-input {
        flex: 1 1 auto;
        .ag-input-field-input {
            padding: 0 !important;
            border: none !important;
            box-shadow: none !important;
            text-overflow: ellipsis;
            &::placeholder {
                opacity: 0.8;
            }
        }
    }

    // /**
    //  ****************************
    //  * Autocomplete
    //  ****************************
    // */
    .ag-autocomplete {
        align-items: center;
        display: flex;

        > * {
            flex: 1 1 auto;
        }
    }

    .ag-autocomplete-list-popup {
        position: absolute;
        @include ag.selectable(none);
    }

    .ag-autocomplete-list {
        position: relative;
    }

    .ag-autocomplete-virtual-list-item {
        display: flex;
    }
    
    .ag-autocomplete-row {
        display: flex;
        flex: 1 1 auto;
        align-items: center;
        overflow: hidden;
    }

    .ag-autocomplete-row-label {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    // /**
    //  ****************************
    //  * Pagination
    //  ****************************
    // */
    .ag-paging-panel {
        align-items: center;
        display: flex;
        justify-content: flex-end;
    }

    .ag-paging-page-summary-panel {
        display: flex;
        align-items: center;
    }

    .ag-paging-button {
        position: relative;
    }

    .ag-disabled .ag-paging-page-summary-panel {
        pointer-events: none;
    }

    // /**
    //  ****************************
    //  * Tool Panel
    //  ****************************
    // */
    .ag-tool-panel-wrapper {
        display: flex;
        overflow-y: auto;
        overflow-x: hidden;
        cursor: default;
        @include ag.selectable(none);
    }

    .ag-column-select-column,
    .ag-column-select-column-group,
    .ag-select-agg-func-item {
        position: relative;
        align-items: center;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        height: 100%;
        > * {
            flex: none;
        }
    }

    .ag-select-agg-func-item,
    .ag-column-select-column-label {
        flex: 1 1 auto;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .ag-column-select-checkbox {
        display: flex;
    }

    .ag-tool-panel-horizontal-resize {
        cursor: ew-resize;
        height: 100%;
        position: absolute;
        top: 0;
        width: 5px;
        z-index: 1;
    }

    .ag-side-bar-left .ag-tool-panel-horizontal-resize {
        @include ag.unthemed-rtl(( right: -3px ));
    }

    .ag-side-bar-right .ag-tool-panel-horizontal-resize {
        @include ag.unthemed-rtl(( left: -3px ));
    }

    .ag-details-row {
        width: 100%;
    }

    .ag-details-row-fixed-height {
        height: 100%;
    }

    .ag-details-grid {
        width: 100%;
    }

    .ag-details-grid-fixed-height {
        height: 100%;
    }

    .ag-header-group-cell {
        display: flex;
        align-items: center;
        height: 100%;
        position: absolute;
    }

    .ag-header-group-cell-no-group.ag-header-span-height .ag-header-cell-resize {
        display: none;
    }

    .ag-cell-label-container {
        display: flex;
        justify-content: space-between;
        flex-direction: row-reverse;
        align-items: center;
        height: 100%;
        width: 100%;
        padding: 5px 0px;
    }

    .ag-right-aligned-header {
        .ag-cell-label-container {
            flex-direction: row;
        }

        .ag-header-cell-text {
            text-align: end;
        }
    }

    // /**
    //  ****************************
    //  * Side Bar
    //  ****************************
    // */
    .ag-side-bar {
        display: flex;
        flex-direction: row-reverse;
    }

    .ag-side-bar-left {
        order: -1;
        flex-direction: row;
    }

    .ag-side-button-button {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        flex-wrap: nowrap;
        white-space: nowrap;
        outline: none;
        cursor: pointer;
    }

    .ag-side-button-label {
        writing-mode: vertical-lr;
    }

    // /**
    //  ****************************
    //  * Status Bar
    //  ****************************
    // */
    .ag-status-bar {
        display: flex;
        justify-content: space-between;
        overflow: hidden;
    }

    .ag-status-panel {
        display: inline-flex;
    }

    .ag-status-name-value {
        white-space: nowrap;
    }

    .ag-status-bar-left {
        display: inline-flex;
    }

    .ag-status-bar-center {
        display: inline-flex;
    }

    .ag-status-bar-right {
        display: inline-flex;
    }

    // /**
    //  ****************************
    //  * Widgets
    //  ****************************
    // */

    .ag-icon {
        display: block;
        speak: none;
    }

    .ag-group {
        position: relative;
        width: 100%;
    }

    .ag-group-title-bar {
        display: flex;
        align-items: center;
    }

    .ag-group-title {
        display: block;
        flex: 1 1 auto;
        min-width: 0;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .ag-group-title-bar
    .ag-group-title {
        cursor: default;
    }

    .ag-group-toolbar {
        display: flex;
        align-items: center;
    }

    .ag-group-container {
        display: flex;
    }

    .ag-disabled .ag-group-container {
        pointer-events: none;
    }

    .ag-group-container-horizontal {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .ag-group-container-vertical {
        flex-direction: column;
    }

    .ag-column-group-icons {
        display: block;
        > * {
            cursor: pointer;
        }
    }

    .ag-group-item-alignment-stretch .ag-group-item {
        align-items: stretch;
    }

    .ag-group-item-alignment-start .ag-group-item {
        align-items: flex-start;
    }

    .ag-group-item-alignment-end .ag-group-item {
        align-items: flex-end;
    }

    .ag-toggle-button-icon {
        transition: right 0.3s;
        position: absolute;
        top: -1px;
    }

    .ag-input-field, .ag-select {
        display: flex;
        flex-direction: row;
        align-items: center;
    }

    .ag-input-field-input {
        flex: 1 1 auto;
    }

    .ag-floating-filter-input .ag-input-field-input[type='date'] {
        // Fix a bug in Blink rendering engine where date input will not shrink from its default size in a
        // flex container, but it will grow. So we give it a very small width and it will grow to the right size
        width: 1px;
    }

    .ag-range-field {
        display: flex;
        align-items: center;
    }

    .ag-angle-select {
        display: flex;
        align-items: center;
    }

    .ag-angle-select-wrapper {
        display: flex;
    }

    .ag-angle-select-parent-circle {
        display: block;
        position: relative;
    }
    .ag-angle-select-child-circle {
        position: absolute;
    }

    .ag-slider-wrapper {
        display: flex;
        .ag-input-field {
            flex: 1 1 auto;
        }
    }

    .ag-picker-field-display {
        flex: 1 1 auto;
    }

    .ag-picker-field {
        display: flex;
        align-items: center;
    }

    .ag-picker-field-icon {
        display: flex;
        border: 0;
        padding: 0;
        margin: 0;
        cursor: pointer;
    }

    .ag-picker-field-wrapper {
        overflow: hidden;
    }

    .ag-label-align-right {
        .ag-label {
            order: 1;
        }
        > * {
            flex: none;
        }
    }

    .ag-label-align-top {
        flex-direction: column;
        align-items: flex-start;
        > * {
            align-self: stretch;
        }
    }

    .ag-label-ellipsis {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        flex: 1;
    }

    .ag-color-panel {
        width: 100%;
        display: flex;
        flex-direction: column;
        text-align: center;
    }

    .ag-spectrum-color {
        flex: 1 1 auto;
        position: relative;
        overflow: hidden;
        cursor: default;
    }

    .ag-spectrum-fill {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }

    .ag-spectrum-val {
        cursor: pointer;
    }

    .ag-spectrum-dragger {
        position: absolute;
        pointer-events: none;
        cursor: pointer;
    }

    .ag-spectrum-hue {
        cursor: default;
        background: linear-gradient(to left,
            #ff0000 3%, #ffff00 17%,
            #00ff00 33%, #00ffff 50%,
            #0000ff 67%, #ff00ff 83%,
            #ff0000 100%
        );
    }

    .ag-spectrum-alpha {
        cursor: default;
    }

    .ag-spectrum-hue-background {
        width: 100%;
        height: 100%;
    }

    .ag-spectrum-alpha-background {
        background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgb(0, 0, 0));
        width: 100%;
        height: 100%;
    }

    .ag-spectrum-tool {
        cursor: pointer;
    }

    .ag-spectrum-slider {
        position: absolute;
        pointer-events: none;
    }

    .ag-recent-colors {
        display: flex;
    }

    .ag-recent-color {
        cursor: pointer;
    }

    // Default values for themes that do not use the mixins
    @for $i from 1 to 10 {
        .ag-column-select-indent-#{$i} {
            @include ag.unthemed-rtl(( padding-left: $i * 20px ));
        }

        .ag-set-filter-indent-#{$i} {
            @include ag.unthemed-rtl(( padding-left: $i * 20px ));
        }

        .ag-row-group-indent-#{$i} {
            @include ag.unthemed-rtl(( padding-left: $i * 20px ));
        }
    }

    .ag-pill-select {
        display: flex;
        flex-direction: column;

        .ag-column-drop {
            flex: unset;
        }
    }

    .ag-ltr {
        direction: ltr;
        .ag-body, .ag-floating-top, .ag-floating-bottom, .ag-header, .ag-sticky-top, .ag-body-viewport, .ag-body-horizontal-scroll {
            flex-direction: row;
        }
    }

    .ag-rtl {
        direction: rtl;
        .ag-body, .ag-floating-top, .ag-floating-bottom, .ag-header, .ag-sticky-top, .ag-body-viewport, .ag-body-horizontal-scroll {
            flex-direction: row-reverse;
        }

        .ag-icon-contracted,
        .ag-icon-expanded,
        .ag-icon-tree-closed {
            display: block;
            transform: rotate(180deg);
        }
    }

    .ag-body .ag-body-viewport {
        -webkit-overflow-scrolling: touch;
    }
}